<template>
	<view>
		<!-- 搜索框 -->
		<view class="topnav fixed">
			<view class="cu-bar search bg-white">
				<navigator hover-class="none" url="search" class="search-form round">
					<text class="cuIcon-search icon iconfont icon-sousuo"></text>
					<input type="text" placeholder="搜索z驿站" confirm-type="search"></input>
				</navigator>
			</view>
		</view>
		<view class="head-title u-f-ac">附近驿站</view>
		<view class="add-info">
			<view class="itme bg-white u-f" v-for="(item,index) in postList" :key="index">
				<image :src="item.door_photo" mode="aspectFill" class="post-img"></image>
				<view class="u-fc flex1">
					<view class="u-f-jsb" style="align-items: flex-start;">
						<view class="u-fc title">
							<view>{{item.pick_name}}</view>
							<view class="tui-por-del">
								<view class="del-item del-item-blue">支持冷藏</view>
								<view class="del-item del-item-red">优质服务</view>
							</view>
						</view>
						<view class="round bg-blue text-sm" @click="choosePost(item)">选择驿站</view>
						<!-- <view class="round bg-gray text-sm" v-else>暂停接单</view> -->
					</view>
					
					<view class="distance">距您：{{item.distance_um | dist}}</view>
					<view class="det text-m">{{item.pick_addr}}</view>
					<view class="u-f-jsb">
						<view class="u-f-ajc time"><text class="icon iconfont icon-shijian"></text>营业时间：{{item.open_hours}} - {{item.end_hours}}</view>
						<!-- <view class="u-f-ajc cont" @tap="call(item.phone)"><text class="icon iconfont icon-dianhua"></text>联系商家</view> -->
					</view>
				</view>
				
			</view>
			<view>
				<our-loading :active='loadMore' :translateY='90' text="loading..."></our-loading>
				<om-nomore :visible="noMoreFlag" bgcolor="#f0f0f0"></om-nomore>
				<tui-no-data imgUrl="https://zj.gdwrh.com/fnyg/static/images/my-img/img_nodata.png" v-if="noData1">
					<view>该区域暂未开放，敬请期待</view>
					<tui-button margin="20rpx auto" type="danger" shape="circle"  width="260rpx" height="60rpx" :size="24" @click="toindex">去逛逛</tui-button>
				</tui-no-data>
			</view>
			
		</view>
	</view>
</template>
<script>
	import cache from '@/common/js/utils/cache.js'
	import gcoord from 'gcoord'
	export default {
		data() {
			return {
				searchText:'',
				currentPage:1,
				postList:[],
				total:0,
				loadMore: false,
				noMoreFlag: false,
				noData1: false,
			};
		},
		onLoad() {
			let that = this
			// #ifdef H5
			that.longitude = 23
			that.latitude = 110
			that.getList()
			// #endif
			// 获取本地经纬度
			uni.getLocation({
				type: 'wgs84',
				geocode: true,
				success(e) {
					// 经纬度处理
					var result = gcoord.transform(
					  [e.longitude, e.latitude],    // 经纬度坐标
					  gcoord.WGS84,               // 当前坐标系
					  gcoord.BD09 
					);
					that.longitude = result[0]
					that.latitude = result[1]
					// 业务处理
					that.getList()
				},
				fail(e) {
					that.$tip.toast("定位失败")
				}
			})
		},
		methods:{
			getList(){
				this.$http.post('/api/auth/member/chief/list', {currentPage:this.currentPage,longitude:this.longitude,latitude:this.latitude},{ header: { authType: 'false'}}).then(res => {
					this.loadMore = false
					this.total = res.total
					if(this.total == 0)return this.noData1 = true
					this.postList = [...this.postList,...res.rows]
				})
			},
			// 选择驿站
			choosePost(item){
				this.Route({type:'back'})
				cache.put('pickUpPoint',item)
			}
		},
		onReachBottom() {
			if(this.total == this.postList.length) return this.noMoreFlag = true
			this.loadMore = true
			this.currentPage++
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.topnav {
		top: 0;
		// #ifdef H5
		top: 44px;
		// #endif
	}
	.icon-cuo {
		position: relative;
		right: 20rpx;
	}
	.head-title{
		position: fixed;
		font-size: 30upx;
		font-weight:bold;
		padding: 130upx 28upx 30upx;
		background-color: #F2F2F2;
		top: 0;
		// #ifdef H5
		top: 44px;
		// #endif
		width: 100%;
		z-index: 9;
	}
	.head-title:before{
		content: '';
		width: 6upx;
		height: 28upx;
		display: inline-block;
		background-color: $main-color;
		margin-right: 20upx;
	}
	.add-info{
		width: 100%;
		padding-top: 200rpx;
		& > scroll-view{
			height: 500upx;
		}
		.itme{
			align-items: flex-start;
			border-radius: 20upx;
			padding: 30upx 28upx;
			margin-bottom: 20upx;
			.flex1{
				flex: 1;
			}
			.title{
				font-size: 30upx;
				font-weight: bold;
				color: #080808;
				.icon{
					color: $main-color;
				}
			}
			.post-img{
				border-radius: 18rpx;
				width: 166rpx;
				height: 170rpx;
				flex-shrink: 0;
				display: block;
				margin-right: 18rpx;
			}
			.distance{
				font-size: 24upx;
			}
			.det{
				// width: 430upx;
				margin: 10upx 0;
			}
			.round{
				flex-shrink: 0;
				padding: 10rpx 20rpx;
				margin-left: 18rpx;
			}
			.time{
				.icon{
					color: #080808;
					font-size: 40upx;
				}
			}
			.cont{
				color: $main-color;
				.icon{
					font-size: 40upx;
				}
			}
		}
	}

</style>
